<template>
  <view class="date-container">
    <view
        v-for="(item,index) in dateList"
        :key="index"
        :class="[
            'date-item','mr20',
            item.date === choiceDate ? 'choice-date-item' : '',
            item.isBan ? '' : 'ban-date-item'
        ]"
        @click="chooseDate(item)"
    >
      {{item.label}}
    </view>
    <view class="date-item flex flex-center" @click="openCalendar">
      <text class="mr10">更多日期</text>
      <wd-icon name="calendar" size="16px" color="#1b9c61" ></wd-icon>
    </view>
    <wd-calendar
        ref="calendar"
        v-model="defaultDate"
        :min-date="props.minDate"
        :max-date="props.maxDate"
        label="日期选择"
        :with-cell="false"
        :show-confirm="false"
        custom-class="custom-calendar"
        @confirm="handleConfirm"
    ></wd-calendar>
  </view>

</template>

<script setup>
  defineOptions({
    options: {
      styleIsolation: 'shared'
    }
  })
  import dayjs from "dayjs";
  import {watch} from "vue";

  const props = defineProps({
    initialDate: {
      type: String,
      default: dayjs().format("YYYY-MM-DD"),
    },
    choiceDate: {
      type: String,
      default: dayjs().format("YYYY-MM-DD"),
    },
    minDate: {
      type: Number,
      default: 0
    },
    maxDate: {
      type: Number,
      default: 0
    },
  });
  const {  choiceDate, initialDate } = toRefs(props);
  const emits = defineEmits(["confirmDate"]);


  const dateList = ref([]);
  const calendar = ref("");
  const defaultDate = ref(Date.now());

  const initialDateList = (startDate) => {
    const baseDate = dayjs(startDate);
    const result = [];

    // 生成三个日期：当天、+1天、+2天
    for (let i = 0; i < 3; i++) {
      const currentDate = baseDate.add(i, 'day');
      const isToday = currentDate.isSame(dayjs(), 'day');
      const isTomorrow = currentDate.isSame(dayjs().add(1, 'day'), 'day');

      let label;
      if (isToday) {
        label = "订今日";
      } else if (isTomorrow) {
        label = "订明日";
      } else {
        label = `${currentDate.month() + 1}月${currentDate.date()}日`;
      }

      result.push({
        date: currentDate.format("YYYY-MM-DD"),
        label: label,
        isBan: dayjs(currentDate.format("YYYY-MM-DD")).valueOf() <= dayjs(props.maxDate).valueOf()
      });
    }
    console.log(result,'result');
    dateList.value = result;
  };

  const openCalendar = () => {
    try {
      console.log(calendar.value,'calendar.value')
      calendar.value?.open();
    }catch (e) {
      console.log(e,'打开calendar报错')
    }
  };

  const handleConfirm = (event) => {
    let {value} = event;

    let chooseDate = dayjs(value).format("YYYY-MM-DD");
    emits("confirmDate",{date:chooseDate});
    initialDateList(chooseDate);
  };
  const chooseDate = (event) => {
    let {date} = event;
    if(dayjs(date).valueOf() > dayjs(props.maxDate).valueOf()) return;
    emits("confirmDate",{date});
  };


  watch(initialDate, (val) => {
    if(val) initialDateList(val);
  }, { immediate: true });
  watch(choiceDate, (val) => {
    defaultDate.value = dayjs(val).valueOf();
  }, { immediate: true });

</script>

<style lang="scss" scoped>
  .date-container {
    display: flex;
    .date-item {
      font-size: 22rpx;
      border-radius: 10rpx;
      font-weight: bold;
      padding: 10rpx 16rpx;
      box-sizing: border-box;
      background: #EEEFE7;
    }
    .choice-date-item {
      border: 1rpx solid #1B9C61;
      color: #1B9C61;
    }
    .ban-date-item {
      background: #ece9e9;
      color: #000000;
    }
  }
  ::v-deep .is-selected {
    .wd-month__day-container {
      background: #1b9c61 !important;
    }
  }
  ::v-deep .wd-calendar__confirm {
    .wd-button {
      background: #1b9c61 !important;
    }
  }
</style>
